<template>
    <div class="about">
        <h1>轮播图</h1>
        <div class="box-img">

            <div class="tab">
                <div @click="activeAdd" class="left">←</div>
                <el-image :src="data.imgs[data.num]" class="img"></el-image>
                <div @click="activeDel" class="left">→</div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue'

const data = reactive({
    imgs: [
        'https://img1.baidu.com/it/u=79970571,3817041641&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=729',
        'https://img1.baidu.com/it/u=2889758393,3980738007&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
        'https://img2.baidu.com/it/u=2412411645,3602446803&fm=253&fmt=auto&app=138&f=JPEG?w=570&h=500',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fgroup_topic%2Fraw%2Fpublic%2Fp106878681.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681216521&t=6bebd9b15ecba012fd11503e916741ee'
    ],
    activeIndex: 0,
    num: 0
})

const tabtoggle = (i) => {
    data.activeIndex = i
}

const activeAdd = (i) => {
    if (data.num == 0) {
        data.num = data.imgs.length - 1
    } else {
        data.num--
    }
    console.log(data.num);
}

const activeDel = (i) => {
    if (data.num == data.imgs.length - 1) {
        data.num = 0
    } else {
        data.num++
    }
    console.log(data.num);
}

</script>
<style lang="scss" scoped>
.about {
    text-align: center;

    .box-img {
        width: 100%;
        position: relative;

        .img {
            width: 300px;
            height: 300px;
            margin: 0 20px;
        }

        .tab {
            width: 400px;
            position: absolute;
            left: 50%;
            margin-left: -200px;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .left {
                width: 30px;
                height: 30px;
                text-align: center;
                line-height: 35px;
                background: #eee;
            }
        }
    }

}
</style>